require('../css/curriculum.less')
document.ready(function(){
 
    let mask=document.querySelector('.mask1');
    let video=document.querySelector('#video')
    let videoArr=JSON.parse(localStorage.getItem('userDetail'));
    let previous=document.querySelector('#previous');
    let  paused=document.querySelector('#paused');
    let  next=document.querySelector('#next');
    let  progress=document.querySelector('.progress');
    let  subsequent=document.querySelector('.subsequent');
    let  coursenum=document.querySelector('#coursenum');
    let  coursenum2=document.querySelector('#coursenum2');
    let  name=document.querySelector('#name');
    let courseshowurl=document.querySelector('#courseshowurl');
    let last=document.querySelector('#last');
    // console.log(courseshowurl,last);
    let stopPlay=document.querySelector('#stopPlay');
   
    // console.log(videoArr);
    // console.log(coursenum,coursenum2);
    
     let timer=null;
     let arrTime=[];
     
    let index=0;
    showvideo()
    function showvideo(){
        video.src=window.$$.username+videoArr[index].videoUrl;
        name.textContent=videoArr[index].title;
        coursenum.textContent=index+1;
        coursenum2.textContent=videoArr.length;
        courseshowurl.src=window.$$.username+videoArr[index].imgUrl;
        last.textContent=videoArr[index].title
    }
    //这是点击next包房下一个视频的区域的开始
    next.addEventListener('click',function(){
        index=(index+1)%4
        // if(index>videoArr.length-1){
        //    index= videoArr.length-1
        // }
        showvideo(index);

    })
    // 这是点击播放上一个视频的界面的开始
    previous.addEventListener('click',function(){
        index--;
        if(index<0){
            index=0
         }
         showvideo(index);

    })
    // 这是进度条的开始
    video.addEventListener('play',function(){
      
        paused.className= " iconfont icon-zanting"
        clearInterval(timer)
      let ztime=video.duration;
       let wid=document.body.clientWidth;
       
   timer= setInterval(function(){
    arrTime[index]=video.currentTime;
     console.log(arrTime)
        progress.style.width=video.currentTime/ztime*wid+"px"
        console.log('你好');
        
      },100)
      
    })
    //这是视频的暂停事件
    video.addEventListener('pause',function(){
        clearInterval(timer)
    })
    paused.addEventListener('click',function(){
        clearInterval(timer)
        video.pause()
        mask.style.display="block";
        paused.className= " iconfont icon-kaishi"
    })
  //这是视频播放完成结束的区域
  video.addEventListener('ended',function(){
    clearInterval(timer)
    progress.style.width="100%"
    paused.className= " iconfont icon-kaishi";
    index=(index+1)%4
    showvideo(index)
  })
  //这是mask框的开始
  subsequent.addEventListener('click',function(){
      video.play()
      mask.style.display="none"
  })
  //这是保存训练数据区域的开始
  stopPlay.addEventListener('click',function(){
      let userId=JSON.parse(localStorage.getItem('user')).userId;
      let Id=location.search.split('=')[1]
      let count=0;
       
      arrTime.forEach(function(v){
          count+=v
      });
      console.log(count,Id,userId)
       axios.post(window.$$.username+`/sports/saveTrain`,{
        id:Id,
        userId:userId,
        takeTime:count,
        calorie:count*1.2,
       })
       .then(function(res){
           let ret=res.data;
           if(ret.status===0){
               location.href='./exercise.html';
               mask.style.display="none";
           }
       })
       .catch(function(error){
           console.log(error)
       })
  })
})